<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>360player.js</title>
  <link rel="stylesheet" href="http://jashkenas.github.com/docco/resources/docco.css">
</head>
<body>
<div id='container'>
  <div id="background"></div>
  <div id="jump_to">
    Jump To &hellip;
    <div id="jump_wrapper">
      <div id="jump_page">
          <a class="source" href="360player.html">360player.js</a>
          <a class="source" href="../../flashblock/flashblock.html">flashblock.css</a>
          <a class="source" href="../../mp3-player-button/script/mp3-player-button.html">mp3-player-button.js</a>
          <a class="source" href="../../mpc/script/mpc.html">mpc.js</a>
          <a class="source" href="../../page-player/script/page-player.html">page-player.js</a>
          <a class="source" href="../../play-mp3-links/script/inlineplayer.html">inlineplayer.js</a>
          <a class="source" href="../../../script/soundmanager2.html">soundmanager2.js</a>
          <a class="source" href="../../../src/SoundManager2.html">SoundManager2.as</a>
          <a class="source" href="../../../src/SoundManager2_AS3.html">SoundManager2_AS3.as</a>
          <a class="source" href="../../../src/SoundManager2_SMSound_AS3.html">SoundManager2_SMSound_AS3.as</a>
      </div>
    </div>
  </div>
  <table cellspacing=0 cellpadding=0>
  <thead>
    <tr>
      <th class=docs><h1>360player.js</h1></th>
      <th class=code></th>
    </tr>
  </thead>
  <tbody>
    <tr id='section-SoundManager_2_Demo:_360-degree_/_&amp;ldquo;donut_player&amp;rdquo;'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-SoundManager_2_Demo:_360-degree_/_&amp;ldquo;donut_player&amp;rdquo;">&#182;</a>
        </div>
        <h2>SoundManager 2 Demo: 360-degree / &ldquo;donut player&rdquo;</h2>

<p>http://schillmania.com/projects/soundmanager2/</p>

<p>An inline player with a circular UI.
Based on the original SM2 inline player.
Inspired by Apple&rsquo;s preview feature in the
iTunes music store (iPhone), among others.</p>

<p>Requires SoundManager 2 Javascript API.
Also uses Bernie&rsquo;s Better Animation Class (BSD):
http://www.berniecode.com/writing/animator.html</p>
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="cm">/*jslint white: false, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: false, newcap: true, immed: true */</span>
<span class="cm">/*global document, window, soundManager, navigator */</span>

<span class="kd">var</span> <span class="nx">threeSixtyPlayer</span><span class="p">,</span> <span class="c1">// instance</span>
    <span class="nx">ThreeSixtyPlayer</span><span class="p">;</span> <span class="c1">// constructor</span>

<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nb">window</span><span class="p">)</span> <span class="p">{</span>

<span class="kd">function</span> <span class="nx">ThreeSixtyPlayer</span><span class="p">()</span> <span class="p">{</span>

  <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
      <span class="nx">pl</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
      <span class="nx">sm</span> <span class="o">=</span> <span class="nx">soundManager</span><span class="p">,</span> <span class="c1">// soundManager instance</span>
      <span class="nx">uA</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">,</span>
      <span class="nx">isIE</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/msie/i</span><span class="p">)),</span>
      <span class="nx">isOpera</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/opera/i</span><span class="p">)),</span>
      <span class="nx">isSafari</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/safari/i</span><span class="p">)),</span>
      <span class="nx">isChrome</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/chrome/i</span><span class="p">)),</span>
      <span class="nx">isFirefox</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/firefox/i</span><span class="p">)),</span>
      <span class="nx">isTouchDevice</span> <span class="o">=</span> <span class="p">(</span><span class="nx">uA</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/ipad|iphone/i</span><span class="p">)),</span>
      <span class="nx">hasRealCanvas</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">G_vmlCanvasManager</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">).</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">),</span></pre></div>
      </td>
    </tr>
    <tr id='section-2'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-2">&#182;</a>
        </div>
        <p>I dunno what Opera doesn&rsquo;t like about this. I&rsquo;m probably doing it wrong.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">fullCircle</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isOpera</span><span class="o">||</span><span class="nx">isChrome</span><span class="o">?</span><span class="mf">359.9</span><span class="o">:</span><span class="mi">360</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-3'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-3">&#182;</a>
        </div>
        <p>CSS class for ignoring MP3 links</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="k">this</span><span class="p">.</span><span class="nx">excludeClass</span> <span class="o">=</span> <span class="s1">&#39;threesixty-exclude&#39;</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">links</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">sounds</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">soundsByURL</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">indexByURL</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">lastTouchedSound</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">soundCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">oUITemplate</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">oUIImageMap</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">vuMeter</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">callbackCount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">peakDataHistory</span> <span class="o">=</span> <span class="p">[];</span></pre></div>
      </td>
    </tr>
    <tr id='section-4'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-4">&#182;</a>
        </div>
        <p>360player configuration options</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="p">{</span>

    <span class="nx">playNext</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>   <span class="c1">// stop after one sound, or play through list until end</span>
    <span class="nx">autoPlay</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>   <span class="c1">// start playing the first sound right away</span>
    <span class="nx">allowMultiple</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>  <span class="c1">// let many sounds play at once (false = only one sound playing at a time)</span>
    <span class="nx">loadRingColor</span><span class="o">:</span> <span class="s1">&#39;#ccc&#39;</span><span class="p">,</span> <span class="c1">// how much has loaded</span>
    <span class="nx">playRingColor</span><span class="o">:</span> <span class="s1">&#39;#000&#39;</span><span class="p">,</span> <span class="c1">// how much has played</span>
    <span class="nx">backgroundRingColor</span><span class="o">:</span> <span class="s1">&#39;#eee&#39;</span><span class="p">,</span> <span class="c1">// color shown underneath load + play (&quot;not yet loaded&quot; color)</span></pre></div>
      </td>
    </tr>
    <tr id='section-5'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-5">&#182;</a>
        </div>
        <p>optional segment/annotation (metadata) stuff..</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">segmentRingColor</span><span class="o">:</span> <span class="s1">&#39;rgba(255,255,255,0.33)&#39;</span><span class="p">,</span> <span class="c1">// metadata/annotation (segment) colors</span>
    <span class="nx">segmentRingColorAlt</span><span class="o">:</span> <span class="s1">&#39;rgba(0,0,0,0.1)&#39;</span><span class="p">,</span>
    <span class="nx">loadRingColorMetadata</span><span class="o">:</span> <span class="s1">&#39;#ddd&#39;</span><span class="p">,</span> <span class="c1">// &quot;annotations&quot; load color</span>
    <span class="nx">playRingColorMetadata</span><span class="o">:</span> <span class="s1">&#39;rgba(128,192,256,0.9)&#39;</span><span class="p">,</span> <span class="c1">// how much has played when metadata is present</span>

    <span class="nx">circleDiameter</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// set dynamically according to values from CSS</span>
    <span class="nx">circleRadius</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
    <span class="nx">animDuration</span><span class="o">:</span> <span class="mi">500</span><span class="p">,</span>
    <span class="nx">animTransition</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Animator</span><span class="p">.</span><span class="nx">tx</span><span class="p">.</span><span class="nx">bouncy</span><span class="p">,</span> <span class="c1">// http://www.berniecode.com/writing/animator.html</span>
    <span class="nx">showHMSTime</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// hours:minutes:seconds vs. seconds-only</span>
    <span class="nx">scaleFont</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>  <span class="c1">// also set the font size (if possible) while animating the circle</span></pre></div>
      </td>
    </tr>
    <tr id='section-6'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-6">&#182;</a>
        </div>
        <p>optional: spectrum or EQ graph in canvas (not supported in IE &lt;9, too slow via ExCanvas)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">useWaveformData</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="nx">waveformDataColor</span><span class="o">:</span> <span class="s1">&#39;#0099ff&#39;</span><span class="p">,</span>
    <span class="nx">waveformDataDownsample</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="c1">// use only one in X (of a set of 256 values) - 1 means all 256</span>
    <span class="nx">waveformDataOutside</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="nx">waveformDataConstrain</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">// if true, +ve values only - keep within inside circle</span>
    <span class="nx">waveformDataLineRatio</span><span class="o">:</span> <span class="mf">0.64</span><span class="p">,</span></pre></div>
      </td>
    </tr>
    <tr id='section-7'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-7">&#182;</a>
        </div>
        <p>&ldquo;spectrum frequency&rdquo; option</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">useEQData</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="nx">eqDataColor</span><span class="o">:</span> <span class="s1">&#39;#339933&#39;</span><span class="p">,</span>
    <span class="nx">eqDataDownsample</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span> <span class="c1">// use only one in X (of 256 values)</span>
    <span class="nx">eqDataOutside</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="nx">eqDataLineRatio</span><span class="o">:</span> <span class="mf">0.54</span><span class="p">,</span></pre></div>
      </td>
    </tr>
    <tr id='section-8'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-8">&#182;</a>
        </div>
        <p>enable &ldquo;amplifier&rdquo; (canvas pulses like a speaker) effect</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">usePeakData</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="nx">peakDataColor</span><span class="o">:</span> <span class="s1">&#39;#ff33ff&#39;</span><span class="p">,</span>
    <span class="nx">peakDataOutside</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
    <span class="nx">peakDataLineRatio</span><span class="o">:</span> <span class="mf">0.5</span><span class="p">,</span>

    <span class="nx">useAmplifier</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">// &quot;pulse&quot; like a speaker</span>

    <span class="nx">fontSizeMax</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="c1">// set according to CSS</span>

    <span class="nx">scaleArcWidth</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>  <span class="c1">// thickness factor of playback progress ring</span>

    <span class="nx">useFavIcon</span><span class="o">:</span> <span class="kc">false</span> <span class="c1">// Experimental (also requires usePeakData: true).. Try to draw a &quot;VU Meter&quot; in the favicon area, if browser supports it (Firefox + Opera as of 2009)</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">css</span> <span class="o">=</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-9'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-9">&#182;</a>
        </div>
        <p>CSS class names appended to link during various states</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">sDefault</span><span class="o">:</span> <span class="s1">&#39;sm2_link&#39;</span><span class="p">,</span> <span class="c1">// default state</span>
    <span class="nx">sBuffering</span><span class="o">:</span> <span class="s1">&#39;sm2_buffering&#39;</span><span class="p">,</span>
    <span class="nx">sPlaying</span><span class="o">:</span> <span class="s1">&#39;sm2_playing&#39;</span><span class="p">,</span>
    <span class="nx">sPaused</span><span class="o">:</span> <span class="s1">&#39;sm2_paused&#39;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">addEventHandler</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">?</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
  <span class="p">}</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">o</span><span class="p">.</span><span class="nx">attachEvent</span><span class="p">(</span><span class="s1">&#39;on&#39;</span><span class="o">+</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">);</span>
  <span class="p">});</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">removeEventHandler</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">?</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">,</span><span class="kc">false</span><span class="p">);</span>
  <span class="p">}</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">evtName</span><span class="p">,</span> <span class="nx">evtHandler</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">detachEvent</span><span class="p">(</span><span class="s1">&#39;on&#39;</span><span class="o">+</span><span class="nx">evtName</span><span class="p">,</span><span class="nx">evtHandler</span><span class="p">);</span>
  <span class="p">});</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">hasClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">typeof</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">)</span><span class="o">!==</span><span class="s1">&#39;undefined&#39;</span><span class="o">?</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">&#39;(\\s|^)&#39;</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">&#39;(\\s|$)&#39;</span><span class="p">))</span><span class="o">:</span><span class="kc">false</span><span class="p">;</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">addClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">cStr</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">))</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">o</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="o">?</span><span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="o">+</span><span class="s1">&#39; &#39;</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="o">+</span><span class="nx">cStr</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">removeClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">cStr</span> <span class="o">||</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">cStr</span><span class="p">))</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">o</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">&#39;( &#39;</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">&#39;)|(&#39;</span><span class="o">+</span><span class="nx">cStr</span><span class="o">+</span><span class="s1">&#39;)&#39;</span><span class="p">,</span><span class="s1">&#39;g&#39;</span><span class="p">),</span><span class="s1">&#39;&#39;</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getElementsByClassName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">className</span><span class="p">,</span><span class="nx">tagNames</span><span class="p">,</span><span class="nx">oParent</span><span class="p">)</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oParent</span><span class="o">||</span><span class="nb">document</span><span class="p">),</span>
        <span class="nx">matches</span> <span class="o">=</span> <span class="p">[],</span> <span class="nx">i</span><span class="p">,</span><span class="nx">j</span><span class="p">,</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">tagNames</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">tagNames</span> <span class="o">!==</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="nx">tagNames</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">nodes</span> <span class="o">||</span> <span class="o">!</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]])</span> <span class="p">{</span>
          <span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
        <span class="p">}</span>
      <span class="p">}</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">tagNames</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">tagNames</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
      <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">all</span><span class="o">||</span><span class="nx">doc</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;*&#39;</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">tagNames</span><span class="p">)</span><span class="o">!==</span><span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="nx">tagNames</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
        <span class="k">for</span> <span class="p">(</span><span class="nx">j</span><span class="o">=</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]].</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
          <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]][</span><span class="nx">j</span><span class="p">],</span><span class="nx">className</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">matches</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">tagNames</span><span class="p">[</span><span class="nx">i</span><span class="p">]][</span><span class="nx">j</span><span class="p">]);</span>
          <span class="p">}</span>
        <span class="p">}</span>
      <span class="p">}</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
      <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">nodes</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">className</span><span class="p">))</span> <span class="p">{</span>
          <span class="nx">matches</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">nodes</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
        <span class="p">}</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">matches</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getParentByNodeName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">sParentNodeName</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oChild</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sParentNodeName</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">sParentNodeName</span> <span class="o">=</span> <span class="nx">sParentNodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">();</span>
    <span class="k">while</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">sParentNodeName</span> <span class="o">!==</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">())</span> <span class="p">{</span>
      <span class="nx">oChild</span> <span class="o">=</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">sParentNodeName</span> <span class="o">===</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span><span class="o">?</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getParentByClassName</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">sParentClassName</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oChild</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sParentClassName</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">while</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">,</span><span class="nx">sParentClassName</span><span class="p">))</span> <span class="p">{</span>
      <span class="nx">oChild</span> <span class="o">=</span> <span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">,</span><span class="nx">sParentClassName</span><span class="p">)</span><span class="o">?</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getSoundByURL</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sURL</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">sURL</span><span class="p">]</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">sURL</span><span class="p">]</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">isChildOfNode</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">sNodeName</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">sNodeName</span> <span class="o">=</span> <span class="nx">sNodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">();</span>
    <span class="k">do</span> <span class="p">{</span>
      <span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">!==</span> <span class="nx">sNodeName</span><span class="p">);</span>
    <span class="k">return</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">===</span> <span class="nx">sNodeName</span><span class="o">?</span><span class="nx">o</span><span class="o">:</span><span class="kc">null</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">isChildOfClass</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">oClass</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oChild</span> <span class="o">||</span> <span class="o">!</span><span class="nx">oClass</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">while</span> <span class="p">(</span><span class="nx">oChild</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">oClass</span><span class="p">))</span> <span class="p">{</span>
      <span class="nx">oChild</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">findParent</span><span class="p">(</span><span class="nx">oChild</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oChild</span><span class="p">,</span><span class="nx">oClass</span><span class="p">));</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">findParent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span> <span class="o">||</span> <span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">while</span> <span class="p">(</span><span class="nx">o</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span> <span class="o">&amp;&amp;</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">nodeType</span> <span class="o">===</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">o</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">o</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getStyle</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">sProp</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-10'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-10">&#182;</a>
        </div>
        <p>http://www.quirksmode.org/dom/getstyles.html</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">try</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">currentStyle</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">o</span><span class="p">.</span><span class="nx">currentStyle</span><span class="p">[</span><span class="nx">sProp</span><span class="p">];</span>
      <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nb">document</span><span class="p">.</span><span class="nx">defaultView</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="kc">null</span><span class="p">).</span><span class="nx">getPropertyValue</span><span class="p">(</span><span class="nx">sProp</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-11'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-11">&#182;</a>
        </div>
        <p>oh well</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="p">}</span>
    <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">findXY</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">curleft</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">curtop</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">do</span> <span class="p">{</span>
      <span class="nx">curleft</span> <span class="o">+=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetLeft</span><span class="p">;</span>
      <span class="nx">curtop</span> <span class="o">+=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetTop</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="o">!!</span><span class="p">(</span><span class="nx">obj</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">offsetParent</span><span class="p">));</span>
    <span class="k">return</span> <span class="p">[</span><span class="nx">curleft</span><span class="p">,</span><span class="nx">curtop</span><span class="p">];</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getMouseXY</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-12'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-12">&#182;</a>
        </div>
        <p>http://www.quirksmode.org/js/events_properties.html</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">e</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">isTouchDevice</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">e</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">,</span><span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">];</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientX</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">getScrollLeft</span><span class="p">(),</span><span class="nx">e</span><span class="p">.</span><span class="nx">clientY</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">getScrollTop</span><span class="p">()];</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getScrollLeft</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="o">+</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollLeft</span><span class="p">);</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getScrollTop</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">scrollTop</span><span class="o">+</span><span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">scrollTop</span><span class="p">);</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">events</span> <span class="o">=</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-13'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-13">&#182;</a>
        </div>
        <p>handlers for sound events as they&rsquo;re started/stopped/played</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">play</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">;</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">fanOut</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">stop</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">fanIn</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">pause</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPaused</span><span class="p">;</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">resume</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">;</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>      
    <span class="p">},</span>

    <span class="nx">finish</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="kd">var</span> <span class="nx">nextLink</span><span class="p">;</span>
      <span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span></pre></div>
      </td>
    </tr>
    <tr id='section-14'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-14">&#182;</a>
        </div>
        <p>self.clearCanvas(this._360data.oCanvas);</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// so fan draws full circle</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">fanIn</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">pl</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playNext</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">nextLink</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pl</span><span class="p">.</span><span class="nx">indexByURL</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">nextLink</span><span class="o">&lt;</span><span class="nx">pl</span><span class="p">.</span><span class="nx">links</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">pl</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="s1">&#39;target&#39;</span><span class="o">:</span><span class="nx">pl</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">nextLink</span><span class="p">]});</span>
        <span class="p">}</span>
      <span class="p">}</span>
    <span class="p">},</span>

    <span class="nx">whileloading</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">paused</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">},</span>

    <span class="nx">whileplaying</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span><span class="o">++</span><span class="p">;</span>
    <span class="p">},</span>

    <span class="nx">bufferchange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">isBuffering</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">pl</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sBuffering</span><span class="p">);</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">pl</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="nx">pl</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sBuffering</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">stopEvent</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

   <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getTheDamnLink</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isIE</span><span class="p">)</span><span class="o">?</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-15'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-15">&#182;</a>
        </div>
        <p>I really didn&rsquo;t want to have to do this.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">return</span> <span class="p">(</span><span class="nx">e</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">);</span>
  <span class="p">}</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-16'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-16">&#182;</a>
        </div>
        <p>a sound link was clicked</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">button</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-17'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-17">&#182;</a>
        </div>
        <p>only catch left-clicks</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getTheDamnLink</span><span class="p">(</span><span class="nx">e</span><span class="p">),</span>
        <span class="nx">sURL</span><span class="p">,</span> <span class="nx">soundURL</span><span class="p">,</span> <span class="nx">thisSound</span><span class="p">,</span> <span class="nx">oContainer</span><span class="p">,</span> <span class="nx">has_vis</span><span class="p">,</span> <span class="nx">diameter</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">!==</span> <span class="s1">&#39;a&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">o</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">isChildOfNode</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">isChildOfClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">&#39;ui360&#39;</span><span class="p">))</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-18'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-18">&#182;</a>
        </div>
        <p>not a link we&rsquo;re interested in</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nx">sURL</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">);</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">o</span><span class="p">.</span><span class="nx">href</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sm</span><span class="p">.</span><span class="nx">canPlayLink</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="o">||</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">excludeClass</span><span class="p">))</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// pass-thru for non-MP3/non-links</span>
    <span class="p">}</span>

    <span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;handleClick()&#39;</span><span class="p">);</span>
    <span class="nx">soundURL</span> <span class="o">=</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span>
    <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getSoundByURL</span><span class="p">(</span><span class="nx">soundURL</span><span class="p">);</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-19'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-19">&#182;</a>
        </div>
        <p>already exists</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span> <span class="o">===</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-20'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-20">&#182;</a>
        </div>
        <p>and was playing (or paused)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">thisSound</span><span class="p">.</span><span class="nx">togglePause</span><span class="p">();</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-21'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-21">&#182;</a>
        </div>
        <p>different sound</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">thisSound</span><span class="p">.</span><span class="nx">togglePause</span><span class="p">();</span> <span class="c1">// start playing current</span>
        <span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;sound different than last sound: &#39;</span><span class="o">+</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">allowMultiple</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">self</span><span class="p">.</span><span class="nx">stopSound</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">);</span>
        <span class="p">}</span>
      <span class="p">}</span>

    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-22'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-22">&#182;</a>
        </div>
        <p>append some dom shiz, make noise</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">oContainer</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">;</span>
      <span class="nx">has_vis</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;ui360-vis&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">).</span><span class="nx">length</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-23'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-23">&#182;</a>
        </div>
        <p>create sound</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">sm</span><span class="p">.</span><span class="nx">createSound</span><span class="p">({</span>
       <span class="nx">id</span><span class="o">:</span><span class="s1">&#39;ui360Sound&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">soundCount</span><span class="o">++</span><span class="p">),</span>
       <span class="nx">url</span><span class="o">:</span><span class="nx">soundURL</span><span class="p">,</span>
       <span class="nx">onplay</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">play</span><span class="p">,</span>
       <span class="nx">onstop</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">stop</span><span class="p">,</span>
       <span class="nx">onpause</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">pause</span><span class="p">,</span>
       <span class="nx">onresume</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">resume</span><span class="p">,</span>
       <span class="nx">onfinish</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">finish</span><span class="p">,</span>
       <span class="nx">onbufferchange</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">bufferchange</span><span class="p">,</span>
       <span class="nx">whileloading</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">whileloading</span><span class="p">,</span>
       <span class="nx">whileplaying</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">whileplaying</span><span class="p">,</span>
       <span class="nx">useWaveformData</span><span class="o">:</span><span class="p">(</span><span class="nx">has_vis</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useWaveformData</span><span class="p">),</span>
       <span class="nx">useEQData</span><span class="o">:</span><span class="p">(</span><span class="nx">has_vis</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">),</span>
       <span class="nx">usePeakData</span><span class="o">:</span><span class="p">(</span><span class="nx">has_vis</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="p">)</span>
      <span class="p">});</span></pre></div>
      </td>
    </tr>
    <tr id='section-24'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-24">&#182;</a>
        </div>
        <p>tack on some custom data</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">diameter</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-360ui&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">offsetWidth</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>

      <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">oUI360</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getParentByClassName</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">&#39;ui360&#39;</span><span class="p">),</span> <span class="c1">// the (whole) entire container</span>
        <span class="nx">oLink</span><span class="o">:</span> <span class="nx">o</span><span class="p">,</span> <span class="c1">// DOM node for reference within SM2 object event handlers</span>
        <span class="nx">className</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sPlaying</span><span class="p">,</span>
        <span class="nx">oUIBox</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-360ui&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">oCanvas</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-canvas&#39;</span><span class="p">,</span><span class="s1">&#39;canvas&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">oButton</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-360btn&#39;</span><span class="p">,</span><span class="s1">&#39;span&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">oTiming</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-timing&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">oCover</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-cover&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oContainer</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">circleDiameter</span><span class="o">:</span> <span class="nx">diameter</span><span class="p">,</span>
        <span class="nx">circleRadius</span><span class="o">:</span> <span class="nx">diameter</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span>
        <span class="nx">lastTime</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
        <span class="nx">didFinish</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
        <span class="nx">pauseCount</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>
        <span class="nx">radius</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>
        <span class="nx">fontSize</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
        <span class="nx">fontSizeMax</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">fontSizeMax</span><span class="p">,</span>
        <span class="nx">scaleFont</span><span class="o">:</span> <span class="p">(</span><span class="nx">has_vis</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">scaleFont</span><span class="p">),</span>
        <span class="nx">showHMSTime</span><span class="o">:</span> <span class="nx">has_vis</span><span class="p">,</span>
        <span class="nx">amplifier</span><span class="o">:</span> <span class="p">(</span><span class="nx">has_vis</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="o">?</span><span class="mf">0.9</span><span class="o">:</span><span class="mi">1</span><span class="p">),</span> <span class="c1">// TODO: x1 if not being used, else use dynamic &quot;how much to amplify by&quot; value</span>
        <span class="nx">radiusMax</span><span class="o">:</span> <span class="nx">diameter</span><span class="o">*</span><span class="mf">0.175</span><span class="p">,</span> <span class="c1">// circle radius</span>
        <span class="nx">width</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>
        <span class="nx">widthMax</span><span class="o">:</span> <span class="nx">diameter</span><span class="o">*</span><span class="mf">0.4</span><span class="p">,</span> <span class="c1">// width of the outer ring</span>
        <span class="nx">lastValues</span><span class="o">:</span> <span class="p">{</span>
          <span class="nx">bytesLoaded</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
          <span class="nx">bytesTotal</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
          <span class="nx">position</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
          <span class="nx">durationEstimate</span><span class="o">:</span> <span class="mi">0</span>
        <span class="p">},</span> <span class="c1">// used to track &quot;last good known&quot; values before sound finish/reset for anim</span>
        <span class="nx">animating</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
        <span class="nx">oAnim</span><span class="o">:</span> <span class="k">new</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Animator</span><span class="p">({</span>
          <span class="nx">duration</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animDuration</span><span class="p">,</span>
          <span class="nx">transition</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animTransition</span><span class="p">,</span>
          <span class="nx">onComplete</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-25'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-25">&#182;</a>
        </div>
        <p>var thisSound = this;
thisSound._360data.didFinish = false; // reset full circle</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>          <span class="p">}</span>
        <span class="p">}),</span>
        <span class="nx">oAnimProgress</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nProgress</span><span class="p">)</span> <span class="p">{</span>
          <span class="kd">var</span> <span class="nx">thisSound</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
          <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radiusMax</span><span class="o">*</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="o">*</span><span class="nx">nProgress</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
          <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">widthMax</span><span class="o">*</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="o">*</span><span class="nx">nProgress</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
          <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">scaleFont</span> <span class="o">&amp;&amp;</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fontSizeMax</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fontSizeMax</span><span class="o">*</span><span class="nx">nProgress</span><span class="p">),</span> <span class="mi">10</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;px&#39;</span><span class="p">;</span>
            <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="nx">nProgress</span><span class="p">;</span>
          <span class="p">}</span>
          <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">paused</span> <span class="o">||</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">playState</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesLoaded</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
          <span class="p">}</span>
        <span class="p">},</span>
        <span class="nx">fps</span><span class="o">:</span> <span class="mi">0</span>
      <span class="p">};</span></pre></div>
      </td>
    </tr>
    <tr id='section-26'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-26">&#182;</a>
        </div>
        <p>&ldquo;Metadata&rdquo; (annotations)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">self</span><span class="p">.</span><span class="nx">Metadata</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;metadata&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUI360</span><span class="p">).</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">self</span><span class="p">.</span><span class="nx">Metadata</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">,</span><span class="nx">self</span><span class="p">);</span>
      <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-27'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-27">&#182;</a>
        </div>
        <p>minimize ze font</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">scaleFont</span> <span class="o">&amp;&amp;</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fontSizeMax</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">fontSize</span> <span class="o">=</span> <span class="s1">&#39;1px&#39;</span><span class="p">;</span>
      <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-28'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-28">&#182;</a>
        </div>
        <p>set up ze animation</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnim</span><span class="p">.</span><span class="nx">addSubject</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnimProgress</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-29'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-29">&#182;</a>
        </div>
        <p>animate the radius out nice</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">self</span><span class="p">.</span><span class="nx">refreshCoords</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>

      <span class="nx">self</span><span class="p">.</span><span class="nx">updatePlaying</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>

      <span class="nx">self</span><span class="p">.</span><span class="nx">soundsByURL</span><span class="p">[</span><span class="nx">soundURL</span><span class="p">]</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">sounds</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">allowMultiple</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">stopSound</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">);</span>
      <span class="p">}</span>
      <span class="nx">thisSound</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>

    <span class="p">}</span>

    <span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span> <span class="c1">// reference for next call</span>

    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">fanOut</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>

     <span class="kd">var</span> <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">;</span>
     <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
       <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
     <span class="p">}</span>
     <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
     <span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;fanOut: &#39;</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">id</span><span class="o">+</span><span class="s1">&#39;: &#39;</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span>
     <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnim</span><span class="p">.</span><span class="nx">seekTo</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="c1">// play to end</span>
     <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-30'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-30">&#182;</a>
        </div>
        <p>oncomplete hack</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>       <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
     <span class="p">},</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animDuration</span><span class="o">+</span><span class="mi">20</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">fanIn</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>

     <span class="kd">var</span> <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">;</span>
     <span class="k">if</span> <span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
       <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
     <span class="p">}</span>
     <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
     <span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;fanIn: &#39;</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">id</span><span class="o">+</span><span class="s1">&#39;: &#39;</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">href</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-31'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-31">&#182;</a>
        </div>
        <p>massive hack</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>     <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oAnim</span><span class="p">.</span><span class="nx">seekTo</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span> <span class="c1">// play to end</span>
     <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-32'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-32">&#182;</a>
        </div>
        <p>reset full 360 fill after animation has completed (oncomplete hack)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>       <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
       <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
       <span class="nx">self</span><span class="p">.</span><span class="nx">resetLastValues</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
     <span class="p">},</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">animDuration</span><span class="o">+</span><span class="mi">20</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">resetLastValues</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">refreshCoords</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">)</span> <span class="p">{</span>

    <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasXY</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">findXY</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">);</span>
    <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMid</span> <span class="o">=</span> <span class="p">[</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleRadius</span><span class="p">,</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleRadius</span><span class="p">];</span>
    <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMidXY</span> <span class="o">=</span> <span class="p">[</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasXY</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMid</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasXY</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="o">+</span><span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMid</span><span class="p">[</span><span class="mi">1</span><span class="p">]];</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">stopSound</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>

    <span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;stopSound: &#39;</span><span class="o">+</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
    <span class="nx">soundManager</span><span class="p">.</span><span class="nx">stop</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// iOS 4.2+ security blocks onfinish() -&gt; playNext() if we set a .src in-between(?)</span>
      <span class="nx">soundManager</span><span class="p">.</span><span class="nx">unload</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">buttonClick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">?</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="o">:</span><span class="nx">e</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">)</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="nx">target</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">getParentByClassName</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span><span class="s1">&#39;sm2-360ui&#39;</span><span class="p">).</span><span class="nx">nextSibling</span><span class="p">});</span> <span class="c1">// link next to the nodes we inserted</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">buttonMouseDown</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-33'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-33">&#182;</a>
        </div>
        <p>user might decide to drag from here
watch for mouse move</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">onmousemove</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-34'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-34">&#182;</a>
        </div>
        <p>should be boundary-checked, really (eg. move 3px first?)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
      <span class="p">};</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;touchmove&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">mouseDown</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">button</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">true</span><span class="p">;</span> <span class="c1">// ignore non-left-click</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">evt</span> <span class="o">=</span> <span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">,</span>
        <span class="nx">target</span><span class="p">,</span> <span class="nx">thisSound</span><span class="p">,</span> <span class="nx">oData</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">isTouchDevice</span> <span class="o">&amp;&amp;</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">touches</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">evt</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="p">}</span>
    <span class="nx">target</span> <span class="o">=</span> <span class="p">(</span><span class="nx">evt</span><span class="p">.</span><span class="nx">target</span><span class="o">||</span><span class="nx">evt</span><span class="p">.</span><span class="nx">srcElement</span><span class="p">);</span>

    <span class="nx">thisSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getSoundByURL</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2_link&#39;</span><span class="p">,</span><span class="s1">&#39;a&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">getParentByClassName</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span><span class="s1">&#39;ui360&#39;</span><span class="p">))[</span><span class="mi">0</span><span class="p">].</span><span class="nx">href</span><span class="p">);</span> <span class="c1">// self.lastSound; // TODO: In multiple sound case, figure out which sound is involved etc.</span></pre></div>
      </td>
    </tr>
    <tr id='section-35'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-35">&#182;</a>
        </div>
        <p>just in case, update coordinates (maybe the element moved since last time.)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">refreshCoords</span><span class="p">(</span><span class="nx">thisSound</span><span class="p">);</span>
    <span class="nx">oData</span> <span class="o">=</span> <span class="nx">thisSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">oData</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="s1">&#39;sm2_dragging&#39;</span><span class="p">);</span>
    <span class="nx">oData</span><span class="p">.</span><span class="nx">pauseCount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">.</span><span class="nx">paused</span><span class="o">?</span><span class="mi">1</span><span class="o">:</span><span class="mi">0</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-36'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-36">&#182;</a>
        </div>
        <p>self.lastSound.pause();</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">(</span><span class="nx">e</span><span class="o">?</span><span class="nx">e</span><span class="o">:</span><span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">);</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">removeEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;touchmove&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;touchmove&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">);</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;touchend&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseUp</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-37'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-37">&#182;</a>
        </div>
        <p>incredibly old-skool. TODO: Modernize.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nb">document</span><span class="p">.</span><span class="nx">onmousemove</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">;</span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">onmouseup</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">mouseUp</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">mouseUp</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">oData</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">oData</span><span class="p">.</span><span class="nx">oUIBox</span><span class="p">,</span><span class="s1">&#39;sm2_dragging&#39;</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">oData</span><span class="p">.</span><span class="nx">pauseCount</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">.</span><span class="nx">resume</span><span class="p">();</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">onmousemove</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">onmouseup</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">removeEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;touchmove&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mmh</span><span class="p">);</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">removeEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;touchend&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseUP</span><span class="p">);</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">mmh</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">e</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">e</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="kd">var</span> <span class="nx">oSound</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">lastTouchedSound</span><span class="p">,</span>
        <span class="nx">coords</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getMouseXY</span><span class="p">(</span><span class="nx">e</span><span class="p">),</span>
        <span class="nx">x</span> <span class="o">=</span> <span class="nx">coords</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">y</span> <span class="o">=</span> <span class="nx">coords</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
        <span class="nx">deltaX</span> <span class="o">=</span> <span class="nx">x</span><span class="o">-</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMidXY</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span>
        <span class="nx">deltaY</span> <span class="o">=</span> <span class="nx">y</span><span class="o">-</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">canvasMidXY</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
        <span class="nx">angle</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">fullCircle</span><span class="o">-</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">rad2deg</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">atan2</span><span class="p">(</span><span class="nx">deltaX</span><span class="p">,</span><span class="nx">deltaY</span><span class="p">))</span><span class="o">+</span><span class="mi">180</span><span class="p">));</span>

    <span class="nx">oSound</span><span class="p">.</span><span class="nx">setPosition</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="o">*</span><span class="p">(</span><span class="nx">angle</span><span class="o">/</span><span class="nx">fullCircle</span><span class="p">));</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>

  <span class="p">};</span></pre></div>
      </td>
    </tr>
    <tr id='section-38'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-38">&#182;</a>
        </div>
        <p>assignMouseDown();</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="k">this</span><span class="p">.</span><span class="nx">drawSolidArc</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oCanvas</span><span class="p">,</span> <span class="nx">color</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">radians</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">noClear</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-39'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-39">&#182;</a>
        </div>
        <p>thank you, http://www.snipersystems.co.nz/community/polarclock/tutorial.html</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">radius</span><span class="p">,</span>
        <span class="nx">y</span> <span class="o">=</span> <span class="nx">radius</span><span class="p">,</span>
        <span class="nx">canvas</span> <span class="o">=</span> <span class="nx">oCanvas</span><span class="p">,</span>
        <span class="nx">ctx</span><span class="p">,</span> <span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">doesntLikeZero</span><span class="p">,</span> <span class="nx">endPoint</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">){</span></pre></div>
      </td>
    </tr>
    <tr id='section-40'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-40">&#182;</a>
        </div>
        <p>use getContext to use the canvas for drawing</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-41'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-41">&#182;</a>
        </div>
        <p>re-assign canvas as the actual context</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nx">ctx</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">noClear</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">clearCanvas</span><span class="p">(</span><span class="nx">canvas</span><span class="p">);</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-42'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-42">&#182;</a>
        </div>
        <p>ctx.restore();</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="nx">color</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>

    <span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">radians</span><span class="p">))</span> <span class="p">{</span>
      <span class="nx">radians</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nx">innerRadius</span> <span class="o">=</span> <span class="nx">radius</span><span class="o">-</span><span class="nx">width</span><span class="p">;</span>
    <span class="nx">doesntLikeZero</span> <span class="o">=</span> <span class="p">(</span><span class="nx">isOpera</span> <span class="o">||</span> <span class="nx">isSafari</span><span class="p">);</span> <span class="c1">// safari 4 doesn&#39;t actually seem to mind.</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">doesntLikeZero</span> <span class="o">||</span> <span class="p">(</span><span class="nx">doesntLikeZero</span> <span class="o">&amp;&amp;</span> <span class="nx">radius</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
      <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">radians</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
      <span class="nx">endPoint</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getArcEndpointCoords</span><span class="p">(</span><span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">radians</span><span class="p">);</span>
      <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="nx">endPoint</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span> <span class="nx">endPoint</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span>
      <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">radians</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
      <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">closePath</span><span class="p">();</span>
      <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">fill</span><span class="p">();</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getArcEndpointCoords</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">radius</span><span class="p">,</span> <span class="nx">radians</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">return</span> <span class="p">{</span>
      <span class="nx">x</span><span class="o">:</span> <span class="nx">radius</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">cos</span><span class="p">(</span><span class="nx">radians</span><span class="p">),</span> 
      <span class="nx">y</span><span class="o">:</span> <span class="nx">radius</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">sin</span><span class="p">(</span><span class="nx">radians</span><span class="p">)</span>
    <span class="p">};</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">deg2rad</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nDeg</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span><span class="nx">nDeg</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="o">/</span><span class="mi">180</span><span class="p">);</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">rad2deg</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nRad</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span><span class="nx">nRad</span> <span class="o">*</span> <span class="mi">180</span><span class="o">/</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="p">);</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getTime</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nMSec</span><span class="p">,</span><span class="nx">bAsString</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-43'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-43">&#182;</a>
        </div>
        <p>convert milliseconds to mm:ss, return as object literal or string</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="kd">var</span> <span class="nx">nSec</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">nMSec</span><span class="o">/</span><span class="mi">1000</span><span class="p">),</span>
        <span class="nx">min</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">nSec</span><span class="o">/</span><span class="mi">60</span><span class="p">),</span>
        <span class="nx">sec</span> <span class="o">=</span> <span class="nx">nSec</span><span class="o">-</span><span class="p">(</span><span class="nx">min</span><span class="o">*</span><span class="mi">60</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-44'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-44">&#182;</a>
        </div>
        <p>if (min === 0 &amp;&amp; sec === 0) return null; // return 0:00 as null</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">return</span> <span class="p">(</span><span class="nx">bAsString</span><span class="o">?</span><span class="p">(</span><span class="nx">min</span><span class="o">+</span><span class="s1">&#39;:&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">sec</span><span class="o">&lt;</span><span class="mi">10</span><span class="o">?</span><span class="s1">&#39;0&#39;</span><span class="o">+</span><span class="nx">sec</span><span class="o">:</span><span class="nx">sec</span><span class="p">))</span><span class="o">:</span><span class="p">{</span><span class="s1">&#39;min&#39;</span><span class="o">:</span><span class="nx">min</span><span class="p">,</span><span class="s1">&#39;sec&#39;</span><span class="o">:</span><span class="nx">sec</span><span class="p">});</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">clearCanvas</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oCanvas</span><span class="p">)</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nx">oCanvas</span><span class="p">,</span>
        <span class="nx">ctx</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span>
        <span class="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">){</span></pre></div>
      </td>
    </tr>
    <tr id='section-45'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-45">&#182;</a>
        </div>
        <p>use getContext to use the canvas for drawing</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">width</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>
    <span class="nx">height</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">;</span>
    <span class="nx">ctx</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="o">-</span><span class="p">(</span><span class="nx">width</span><span class="o">/</span><span class="mi">2</span><span class="p">),</span> <span class="o">-</span><span class="p">(</span><span class="nx">height</span><span class="o">/</span><span class="mi">2</span><span class="p">),</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">);</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">updatePlaying</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">timeNow</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">showHMSTime</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">getTime</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">,</span><span class="kc">true</span><span class="p">)</span><span class="o">:</span><span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="o">/</span><span class="mi">1000</span><span class="p">,</span> <span class="mi">10</span><span class="p">));</span>
    <span class="kd">var</span> <span class="nx">ringScaleFactor</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">scaleArcWidth</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bytesLoaded</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesLoaded</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">bytesLoaded</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesTotal</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">bytesTotal</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">position</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">durationEstimate</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">;</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-46'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-46">&#182;</a>
        </div>
        <p>background ring</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">backgroundRingColor</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">*</span> <span class="nx">ringScaleFactor</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="nx">fullCircle</span><span class="p">),</span><span class="kc">false</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-47'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-47">&#182;</a>
        </div>
        <p>loaded ring</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">loadRingColorMetadata</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">loadRingColor</span><span class="p">),</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">*</span> <span class="nx">ringScaleFactor</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="nx">fullCircle</span><span class="o">*</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesLoaded</span><span class="o">/</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">bytesTotal</span><span class="p">)),</span><span class="mi">0</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-48'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-48">&#182;</a>
        </div>
        <p>don&rsquo;t draw if 0 (full black circle in Opera)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playRingColorMetadata</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playRingColor</span><span class="p">),</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">*</span> <span class="nx">ringScaleFactor</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span><span class="o">===</span><span class="mi">1</span><span class="o">?</span><span class="nx">fullCircle</span><span class="o">:</span><span class="nx">fullCircle</span><span class="o">*</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span><span class="o">/</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">))),</span><span class="mi">0</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-49'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-49">&#182;</a>
        </div>
        <p>metadata goes here</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">whileplaying</span><span class="p">();</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">timeNow</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastTime</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastTime</span> <span class="o">=</span> <span class="nx">timeNow</span><span class="p">;</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oTiming</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">timeNow</span><span class="p">;</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-50'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-50">&#182;</a>
        </div>
        <p>draw spectrum, if applicable</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">if</span> <span class="p">((</span><span class="k">this</span><span class="p">.</span><span class="nx">instanceOptions</span><span class="p">.</span><span class="nx">useWaveformData</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">instanceOptions</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">hasRealCanvas</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// IE &lt;9 can render maybe 3 or 4 FPS when including the wave/EQ, so don&#39;t bother.</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">updateWaveform</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">vuMeter</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">vuMeter</span><span class="p">.</span><span class="nx">updateVU</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">updateWaveform</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">((</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useWaveformData</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="o">!</span><span class="nx">sm</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">waveformData</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">sm</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">eqData</span><span class="p">))</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-51'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-51">&#182;</a>
        </div>
        <p>feature not enabled..</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">waveformData</span><span class="p">.</span><span class="nx">left</span><span class="p">.</span><span class="nx">length</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">eqData</span><span class="p">.</span><span class="nx">length</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">left</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-52'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-52">&#182;</a>
        </div>
        <p>no data (or errored out/paused/unavailable?)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="cm">/* use for testing the data */</span>
    <span class="cm">/*</span>
<span class="cm">     for (i=0; i&lt;256; i++) {</span>
<span class="cm">       oSound.eqData[i] = 1-(i/256);</span>
<span class="cm">     }</span>
<span class="cm">    */</span>

    <span class="kd">var</span> <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">),</span>
        <span class="nx">offX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">offY</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span>
        <span class="nx">scale</span> <span class="o">=</span> <span class="nx">offY</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="c1">// Y axis (+/- this distance from 0)</span></pre></div>
      </td>
    </tr>
    <tr id='section-53'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-53">&#182;</a>
        </div>
        <p>lineWidth = Math.floor(oSound.<em>360data.circleDiameter-(oSound.</em>360data.circleDiameter*0.175)/(oSound._360data.circleDiameter/255)); // width for each line</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
        <span class="nx">lineHeight</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
        <span class="nx">thisY</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">offset</span> <span class="o">=</span> <span class="nx">offY</span><span class="p">,</span>
        <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">direction</span><span class="p">,</span> <span class="nx">downSample</span><span class="p">,</span> <span class="nx">dataLength</span><span class="p">,</span> <span class="nx">sampleCount</span><span class="p">,</span> <span class="nx">startAngle</span><span class="p">,</span> <span class="nx">endAngle</span><span class="p">,</span> <span class="nx">waveData</span><span class="p">,</span> <span class="nx">innerRadius</span><span class="p">,</span> <span class="nx">perItemAngle</span><span class="p">,</span> <span class="nx">yDiff</span><span class="p">,</span> <span class="nx">eqSamples</span><span class="p">,</span> <span class="nx">playedAngle</span><span class="p">,</span> <span class="nx">iAvg</span><span class="p">,</span> <span class="nx">nPeak</span><span class="p">;</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useWaveformData</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-54'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-54">&#182;</a>
        </div>
        <p>raw waveform</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">downSample</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataDownsample</span><span class="p">;</span> <span class="c1">// only sample X in 256 (greater number = less sample points)</span>
      <span class="nx">downSample</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="nx">downSample</span><span class="p">);</span> <span class="c1">// make sure it&#39;s at least 1</span>
      <span class="nx">dataLength</span> <span class="o">=</span> <span class="mi">256</span><span class="p">;</span>
      <span class="nx">sampleCount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">dataLength</span><span class="o">/</span><span class="nx">downSample</span><span class="p">);</span>
      <span class="nx">startAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="nx">endAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="nx">waveData</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
      <span class="nx">innerRadius</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataOutside</span><span class="o">?</span><span class="mi">1</span><span class="o">:</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataConstrain</span><span class="o">?</span><span class="mf">0.5</span><span class="o">:</span><span class="mf">0.565</span><span class="p">));</span>
      <span class="nx">scale</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataOutside</span><span class="o">?</span><span class="mf">0.7</span><span class="o">:</span><span class="mf">0.75</span><span class="p">);</span>
      <span class="nx">perItemAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="mi">360</span><span class="o">/</span><span class="nx">sampleCount</span><span class="p">)</span><span class="o">*</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataLineRatio</span><span class="p">);</span> <span class="c1">// 0.85 = clean pixel lines at 150? // self.deg2rad(360*(Math.max(1,downSample-1))/sampleCount);</span>
      <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">dataLength</span><span class="p">;</span> <span class="nx">i</span><span class="o">+=</span><span class="nx">downSample</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">startAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">i</span><span class="o">/</span><span class="p">(</span><span class="nx">sampleCount</span><span class="p">)</span><span class="o">*</span><span class="mi">1</span><span class="o">/</span><span class="nx">downSample</span><span class="p">));</span> <span class="c1">// +0.67 - counter for spacing</span>
        <span class="nx">endAngle</span> <span class="o">=</span> <span class="nx">startAngle</span><span class="o">+</span><span class="nx">perItemAngle</span><span class="p">;</span>
        <span class="nx">waveData</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">waveformData</span><span class="p">.</span><span class="nx">left</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">waveData</span><span class="o">&lt;</span><span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataConstrain</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">waveData</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">waveData</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">waveformDataColor</span><span class="p">,</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="o">*</span><span class="nx">innerRadius</span><span class="o">*</span><span class="p">(</span><span class="mi">2</span><span class="o">-</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">scaleArcWidth</span><span class="p">),</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span><span class="o">*</span><span class="nx">scale</span><span class="o">*</span><span class="mf">1.25</span><span class="o">*</span><span class="nx">waveData</span><span class="p">,</span><span class="nx">endAngle</span><span class="p">,</span><span class="nx">startAngle</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useEQData</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-55'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-55">&#182;</a>
        </div>
        <p>EQ spectrum</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">downSample</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataDownsample</span><span class="p">;</span> <span class="c1">// only sample N in 256</span>
      <span class="nx">yDiff</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="nx">downSample</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="nx">downSample</span><span class="p">);</span> <span class="c1">// make sure it&#39;s at least 1</span>
      <span class="nx">eqSamples</span> <span class="o">=</span> <span class="mi">192</span><span class="p">;</span> <span class="c1">// drop the last 25% of the spectrum (&gt;16500 Hz), most stuff won&#39;t actually use it.</span>
      <span class="nx">sampleCount</span> <span class="o">=</span> <span class="p">(</span><span class="nx">eqSamples</span><span class="o">/</span><span class="nx">downSample</span><span class="p">);</span>
      <span class="nx">innerRadius</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataOutside</span><span class="o">?</span><span class="mi">1</span><span class="o">:</span><span class="mf">0.565</span><span class="p">);</span>
      <span class="nx">direction</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataOutside</span><span class="o">?-</span><span class="mi">1</span><span class="o">:</span><span class="mi">1</span><span class="p">);</span>
      <span class="nx">scale</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataOutside</span><span class="o">?</span><span class="mf">0.5</span><span class="o">:</span><span class="mf">0.75</span><span class="p">);</span>
      <span class="nx">startAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="nx">endAngle</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="nx">perItemAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="mi">360</span><span class="o">/</span><span class="nx">sampleCount</span><span class="p">)</span><span class="o">*</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataLineRatio</span><span class="p">);</span> <span class="c1">// self.deg2rad(360/(sampleCount+1));</span>
      <span class="nx">playedAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">((</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">didFinish</span><span class="o">===</span><span class="mi">1</span><span class="o">?</span><span class="mi">360</span><span class="o">:</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">position</span><span class="o">/</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">lastValues</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">)));</span>
      <span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
      <span class="nx">iAvg</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">eqSamples</span><span class="p">;</span> <span class="nx">i</span><span class="o">+=</span><span class="nx">downSample</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">startAngle</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">i</span><span class="o">/</span><span class="nx">eqSamples</span><span class="p">));</span>
        <span class="nx">endAngle</span> <span class="o">=</span> <span class="nx">startAngle</span><span class="o">+</span><span class="nx">perItemAngle</span><span class="p">;</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="nx">endAngle</span><span class="o">&gt;</span><span class="nx">playedAngle</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">eqDataColor</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">playRingColor</span><span class="p">),</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="o">*</span><span class="nx">innerRadius</span><span class="p">,</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span><span class="o">*</span><span class="nx">scale</span><span class="o">*</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">eqData</span><span class="p">.</span><span class="nx">left</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="o">*</span><span class="nx">direction</span><span class="p">),</span><span class="nx">endAngle</span><span class="p">,</span><span class="nx">startAngle</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">animating</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">nPeak</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">left</span><span class="o">||</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">right</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-56'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-56">&#182;</a>
        </div>
        <p>GIANT HACK: use EQ spectrum data for bass frequencies</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">eqSamples</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
        <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">eqSamples</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">nPeak</span> <span class="o">=</span> <span class="p">(</span><span class="nx">nPeak</span><span class="o">||</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">eqData</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
        <span class="p">}</span>
        <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span> <span class="o">=</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useAmplifier</span><span class="o">?</span><span class="p">(</span><span class="mf">0.9</span><span class="o">+</span><span class="p">(</span><span class="nx">nPeak</span><span class="o">*</span><span class="mf">0.1</span><span class="p">))</span><span class="o">:</span><span class="mi">1</span><span class="p">);</span>
        <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radiusMax</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="o">*</span><span class="mf">0.175</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">;</span>
        <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">widthMax</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="o">*</span><span class="mf">0.4</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">;</span>
        <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radiusMax</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
        <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">widthMax</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">amplifier</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
      <span class="p">}</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">getUIHTML</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">diameter</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">return</span> <span class="p">[</span>
     <span class="s1">&#39;&lt;canvas class=&quot;sm2-canvas&quot; width=&quot;&#39;</span><span class="o">+</span><span class="nx">diameter</span><span class="o">+</span><span class="s1">&#39;&quot; height=&quot;&#39;</span><span class="o">+</span><span class="nx">diameter</span><span class="o">+</span><span class="s1">&#39;&quot;&gt;&lt;/canvas&gt;&#39;</span><span class="p">,</span>
     <span class="s1">&#39; &lt;span class=&quot;sm2-360btn sm2-360btn-default&quot;&gt;&lt;/span&gt;&#39;</span><span class="p">,</span> <span class="c1">// note use of imageMap, edit or remove if you use a different-size image.</span>
     <span class="s1">&#39; &lt;div class=&quot;sm2-timing&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/safari/i</span><span class="p">)</span><span class="o">?</span><span class="s1">&#39; alignTweak&#39;</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;&quot;&gt;&lt;/div&gt;&#39;</span><span class="p">,</span> <span class="c1">// + Ever-so-slight Safari horizontal alignment tweak</span>
     <span class="s1">&#39; &lt;div class=&quot;sm2-cover&quot;&gt;&lt;/div&gt;&#39;</span>
    <span class="p">];</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">uiTest</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sClass</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-57'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-57">&#182;</a>
        </div>
        <p>fake a 360 UI so we can get some numbers from CSS, etc.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="kd">var</span> <span class="nx">oTemplate</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">),</span>
        <span class="nx">oFakeUI</span><span class="p">,</span> <span class="nx">oFakeUIBox</span><span class="p">,</span> <span class="nx">oTemp</span><span class="p">,</span> <span class="nx">fakeDiameter</span><span class="p">,</span> <span class="nx">uiHTML</span><span class="p">,</span> <span class="nx">circleDiameter</span><span class="p">,</span> <span class="nx">circleRadius</span><span class="p">,</span> <span class="nx">fontSizeMax</span><span class="p">,</span> <span class="nx">oTiming</span><span class="p">;</span>

    <span class="nx">oTemplate</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;sm2-360ui&#39;</span><span class="p">;</span>

    <span class="nx">oFakeUI</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
    <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;ui360&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">sClass</span><span class="o">?</span><span class="s1">&#39; &#39;</span><span class="o">+</span><span class="nx">sClass</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">);</span> <span class="c1">// ui360 ui360-vis</span>

    <span class="nx">oFakeUIBox</span> <span class="o">=</span> <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">oTemplate</span><span class="p">.</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">));</span>

    <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s1">&#39;absolute&#39;</span><span class="p">;</span>
    <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">left</span> <span class="o">=</span> <span class="s1">&#39;-9999px&#39;</span><span class="p">;</span>

    <span class="nx">oTemp</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">oFakeUI</span><span class="p">);</span>

    <span class="nx">fakeDiameter</span> <span class="o">=</span> <span class="nx">oFakeUIBox</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">;</span>

    <span class="nx">uiHTML</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getUIHTML</span><span class="p">(</span><span class="nx">fakeDiameter</span><span class="p">);</span>

    <span class="nx">oFakeUIBox</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">uiHTML</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="o">+</span><span class="nx">uiHTML</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span><span class="o">+</span><span class="nx">uiHTML</span><span class="p">[</span><span class="mi">3</span><span class="p">];</span>

    <span class="nx">circleDiameter</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">oFakeUIBox</span><span class="p">.</span><span class="nx">offsetWidth</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="nx">circleRadius</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">circleDiameter</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>

    <span class="nx">oTiming</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-timing&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oTemp</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
    <span class="nx">fontSizeMax</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">getStyle</span><span class="p">(</span><span class="nx">oTiming</span><span class="p">,</span><span class="s1">&#39;font-size&#39;</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">fontSizeMax</span><span class="p">))</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-58'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-58">&#182;</a>
        </div>
        <p>getStyle() etc. didn&rsquo;t work.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">fontSizeMax</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-59'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-59">&#182;</a>
        </div>
        <p>soundManager._writeDebug(&lsquo;diameter, font size: &rsquo;+circleDiameter+&lsquo;,&rsquo;+fontSizeMax);</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">oFakeUI</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">oFakeUI</span><span class="p">);</span>

    <span class="nx">uiHTML</span> <span class="o">=</span> <span class="nx">oFakeUI</span> <span class="o">=</span> <span class="nx">oFakeUIBox</span> <span class="o">=</span> <span class="nx">oTemp</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

    <span class="k">return</span> <span class="p">{</span>
      <span class="nx">circleDiameter</span><span class="o">:</span> <span class="nx">circleDiameter</span><span class="p">,</span>
      <span class="nx">circleRadius</span><span class="o">:</span> <span class="nx">circleRadius</span><span class="p">,</span>
      <span class="nx">fontSizeMax</span><span class="o">:</span> <span class="nx">fontSizeMax</span>
    <span class="p">};</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;threeSixtyPlayer.init()&#39;</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">oItems</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;ui360&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">),</span>
        <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">oLinks</span> <span class="o">=</span> <span class="p">[],</span> <span class="nx">is_vis</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">foundItems</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">oCanvas</span><span class="p">,</span> <span class="nx">oCanvasCTX</span><span class="p">,</span> <span class="nx">oCover</span><span class="p">,</span> <span class="nx">diameter</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">uiData</span><span class="p">,</span> <span class="nx">uiDataVis</span><span class="p">,</span> <span class="nx">oUI</span><span class="p">,</span> <span class="nx">oBtn</span><span class="p">,</span> <span class="nx">o</span><span class="p">,</span> <span class="nx">o2</span><span class="p">,</span> <span class="nx">oID</span><span class="p">;</span>

    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="nx">j</span><span class="o">=</span><span class="nx">oItems</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">oLinks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">]);</span></pre></div>
      </td>
    </tr>
    <tr id='section-60'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-60">&#182;</a>
        </div>
        <p>remove &ldquo;fake&rdquo; play button (unsupported case)</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundImage</span> <span class="o">=</span> <span class="s1">&#39;none&#39;</span><span class="p">;</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-61'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-61">&#182;</a>
        </div>
        <p>grab all links, look for .mp3</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;sm2-360ui&#39;</span><span class="p">;</span>

    <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;sm2-360ui&#39;</span><span class="p">;</span>

    <span class="nx">uiData</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">uiTest</span><span class="p">();</span>

    <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">circleDiameter</span> <span class="o">=</span> <span class="nx">uiData</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">circleRadius</span> <span class="o">=</span> <span class="nx">uiData</span><span class="p">.</span><span class="nx">circleRadius</span><span class="p">;</span></pre></div>
      </td>
    </tr>
    <tr id='section-62'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-62">&#182;</a>
        </div>
        <p>self.config.fontSizeMax = uiData.fontSizeMax;</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">uiDataVis</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">uiTest</span><span class="p">(</span><span class="s1">&#39;ui360-vis&#39;</span><span class="p">);</span>

    <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">fontSizeMax</span> <span class="o">=</span> <span class="nx">uiDataVis</span><span class="p">.</span><span class="nx">fontSizeMax</span><span class="p">;</span></pre></div>
      </td>
    </tr>
    <tr id='section-63'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-63">&#182;</a>
        </div>
        <p>canvas needs inline width and height, doesn&rsquo;t quite work otherwise</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getUIHTML</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>

    <span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getUIHTML</span><span class="p">(</span><span class="nx">uiDataVis</span><span class="p">.</span><span class="nx">circleDiameter</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>

    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="nx">j</span><span class="o">=</span><span class="nx">oLinks</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">sm</span><span class="p">.</span><span class="nx">canPlayLink</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">excludeClass</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sDefault</span><span class="p">))</span> <span class="p">{</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="nx">self</span><span class="p">.</span><span class="nx">css</span><span class="p">.</span><span class="nx">sDefault</span><span class="p">);</span> <span class="c1">// add default CSS decoration</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="nx">foundItems</span><span class="p">]</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">indexByURL</span><span class="p">[</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">href</span><span class="p">]</span> <span class="o">=</span> <span class="nx">foundItems</span><span class="p">;</span> <span class="c1">// hack for indexing</span>
        <span class="nx">foundItems</span><span class="o">++</span><span class="p">;</span>

        <span class="nx">is_vis</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">,</span> <span class="s1">&#39;ui360-vis&#39;</span><span class="p">);</span>

        <span class="nx">diameter</span> <span class="o">=</span> <span class="p">(</span><span class="nx">is_vis</span> <span class="o">?</span> <span class="nx">uiDataVis</span> <span class="o">:</span> <span class="nx">uiData</span><span class="p">).</span><span class="nx">circleDiameter</span><span class="p">;</span>
        <span class="nx">radius</span> <span class="o">=</span> <span class="p">(</span><span class="nx">is_vis</span> <span class="o">?</span> <span class="nx">uiDataVis</span> <span class="o">:</span> <span class="nx">uiData</span><span class="p">).</span><span class="nx">circleRadius</span><span class="p">;</span></pre></div>
      </td>
    </tr>
    <tr id='section-64'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-64">&#182;</a>
        </div>
        <p>add canvas shiz</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">oUI</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">((</span><span class="nx">is_vis</span><span class="o">?</span><span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplateVis</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">oUITemplate</span><span class="p">).</span><span class="nx">cloneNode</span><span class="p">(</span><span class="kc">true</span><span class="p">),</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>

        <span class="k">if</span> <span class="p">(</span><span class="nx">isIE</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">G_vmlCanvasManager</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// IE only</span>
          <span class="nx">o</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">;</span>
          <span class="nx">o2</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">);</span>
          <span class="nx">o2</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;sm2-canvas&#39;</span><span class="p">;</span>
          <span class="nx">oID</span> <span class="o">=</span> <span class="s1">&#39;sm2_canvas_&#39;</span><span class="o">+</span><span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span><span class="o">*</span><span class="mi">1048576</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
          <span class="nx">o2</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">oID</span><span class="p">;</span>
          <span class="nx">o2</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">diameter</span><span class="p">;</span>
          <span class="nx">o2</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">diameter</span><span class="p">;</span>
          <span class="nx">oUI</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">o2</span><span class="p">);</span>
          <span class="nb">window</span><span class="p">.</span><span class="nx">G_vmlCanvasManager</span><span class="p">.</span><span class="nx">initElement</span><span class="p">(</span><span class="nx">o2</span><span class="p">);</span> <span class="c1">// Apply ExCanvas compatibility magic</span>
          <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">oID</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> </pre></div>
      </td>
    </tr>
    <tr id='section-65'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-65">&#182;</a>
        </div>
        <p>add a handler for the button</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>          <span class="nx">oCanvas</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
        <span class="p">}</span>
        <span class="nx">oCover</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;sm2-cover&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
        <span class="nx">oBtn</span> <span class="o">=</span> <span class="nx">oLinks</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nx">oBtn</span><span class="p">,</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">buttonClick</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isTouchDevice</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nx">oCover</span><span class="p">,</span><span class="s1">&#39;mousedown&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
          <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nx">oCover</span><span class="p">,</span><span class="s1">&#39;touchstart&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">mouseDown</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">oCanvasCTX</span> <span class="o">=</span> <span class="nx">oCanvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
        <span class="nx">oCanvasCTX</span><span class="p">.</span><span class="nx">translate</span><span class="p">(</span><span class="nx">radius</span><span class="p">,</span> <span class="nx">radius</span><span class="p">);</span>
        <span class="nx">oCanvasCTX</span><span class="p">.</span><span class="nx">rotate</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="o">-</span><span class="mi">90</span><span class="p">));</span> <span class="c1">// compensate for arc starting at EAST // http://stackoverflow.com/questions/319267/tutorial-for-html-canvass-arc-function</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">foundItems</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">self</span><span class="p">.</span><span class="nx">addEventHandler</span><span class="p">(</span><span class="nb">document</span><span class="p">,</span><span class="s1">&#39;click&#39;</span><span class="p">,</span><span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">);</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">autoPlay</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">self</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">({</span><span class="nx">target</span><span class="o">:</span><span class="nx">self</span><span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span><span class="nx">preventDefault</span><span class="o">:</span><span class="kd">function</span><span class="p">(){}});</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">sm</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;threeSixtyPlayer.init(): Found &#39;</span><span class="o">+</span><span class="nx">foundItems</span><span class="o">+</span><span class="s1">&#39; relevant items.&#39;</span><span class="p">);</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="k">this</span><span class="p">.</span><span class="nx">VUMeter</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">vuMeter</span> <span class="o">=</span> <span class="k">new</span> <span class="k">this</span><span class="p">.</span><span class="nx">VUMeter</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
    <span class="p">}</span>

  <span class="p">};</span>

<span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-66'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-66">&#182;</a>
        </div>
        <p>Optional: VU Meter component</p>
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="nx">ThreeSixtyPlayer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">VUMeter</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oParent</span><span class="p">)</span> <span class="p">{</span>

  <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="nx">oParent</span><span class="p">,</span>
      <span class="nx">me</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
      <span class="nx">_head</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;head&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
      <span class="nx">isOpera</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/opera/i</span><span class="p">)),</span>
      <span class="nx">isFirefox</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/firefox/i</span><span class="p">));</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">vuMeterData</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">vuDataCanvas</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">setPageIcon</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sDataURL</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">||</span> <span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span> <span class="o">||</span> <span class="o">!</span><span class="nx">sDataURL</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;sm2-favicon&#39;</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">link</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">_head</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span>
      <span class="nx">link</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">link</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;link&#39;</span><span class="p">);</span>
      <span class="nx">link</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="s1">&#39;sm2-favicon&#39;</span><span class="p">;</span>
      <span class="nx">link</span><span class="p">.</span><span class="nx">rel</span> <span class="o">=</span> <span class="s1">&#39;shortcut icon&#39;</span><span class="p">;</span>
      <span class="nx">link</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s1">&#39;image/png&#39;</span><span class="p">;</span>
      <span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">sDataURL</span><span class="p">;</span>
      <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;head&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">link</span><span class="p">);</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">resetPageIcon</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;favicon&#39;</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">link</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">link</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="s1">&#39;/favicon.ico&#39;</span><span class="p">;</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">updateVU</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">flashVersion</span> <span class="o">&gt;=</span> <span class="mi">9</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">usePeakData</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">me</span><span class="p">.</span><span class="nx">setPageIcon</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">vuMeterData</span><span class="p">[</span><span class="nb">parseInt</span><span class="p">(</span><span class="mi">16</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">left</span><span class="p">,</span> <span class="mi">10</span><span class="p">)][</span><span class="nb">parseInt</span><span class="p">(</span><span class="mi">16</span><span class="o">*</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">peakData</span><span class="p">.</span><span class="nx">right</span><span class="p">,</span> <span class="mi">10</span><span class="p">)]);</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">createVUData</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
        <span class="nx">canvas</span> <span class="o">=</span> <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">),</span>
        <span class="nx">vuGrad</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">createLinearGradient</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span>
        <span class="nx">bgGrad</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">createLinearGradient</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span>
        <span class="nx">outline</span> <span class="o">=</span> <span class="s1">&#39;rgba(0,0,0,0.2)&#39;</span><span class="p">;</span>

    <span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="s1">&#39;rgb(0,192,0)&#39;</span><span class="p">);</span>
    <span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mf">0.30</span><span class="p">,</span><span class="s1">&#39;rgb(0,255,0)&#39;</span><span class="p">);</span>
    <span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mf">0.625</span><span class="p">,</span><span class="s1">&#39;rgb(255,255,0)&#39;</span><span class="p">);</span>
    <span class="nx">vuGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mf">0.85</span><span class="p">,</span><span class="s1">&#39;rgb(255,0,0)&#39;</span><span class="p">);</span>
    <span class="nx">bgGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="nx">outline</span><span class="p">);</span>
    <span class="nx">bgGrad</span><span class="p">.</span><span class="nx">addColorStop</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="s1">&#39;rgba(0,0,0,0.5)&#39;</span><span class="p">);</span>
    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="mi">16</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">me</span><span class="p">.</span><span class="nx">vuMeterData</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
    <span class="p">}</span>
    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="mi">16</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">for</span> <span class="p">(</span><span class="nx">j</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">j</span><span class="o">&lt;</span><span class="mi">16</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-67'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-67">&#182;</a>
        </div>
        <p>reset/erase canvas</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span><span class="mi">16</span><span class="p">);</span>
        <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;height&#39;</span><span class="p">,</span><span class="mi">16</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-68'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-68">&#182;</a>
        </div>
        <p>draw new stuffs</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="nx">bgGrad</span><span class="p">;</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">15</span><span class="p">);</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">15</span><span class="p">);</span>
        <span class="cm">/*</span></pre></div>
      </td>
    </tr>
    <tr id='section-69'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-69">&#182;</a>
        </div>
        <p>shadow</p>
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="cm">        canvas.fillStyle = &#39;rgba(0,0,0,0.1)&#39;;</span>
<span class="cm">        canvas.fillRect(1,15-i,7,17-(17-i));</span>
<span class="cm">        canvas.fillRect(9,15-j,7,17-(17-j));</span>
<span class="cm">        */</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillStyle</span> <span class="o">=</span> <span class="nx">vuGrad</span><span class="p">;</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">15</span><span class="o">-</span><span class="nx">i</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">16</span><span class="o">-</span><span class="p">(</span><span class="mi">16</span><span class="o">-</span><span class="nx">i</span><span class="p">));</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span><span class="mi">15</span><span class="o">-</span><span class="nx">j</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">16</span><span class="o">-</span><span class="p">(</span><span class="mi">16</span><span class="o">-</span><span class="nx">j</span><span class="p">));</span></pre></div>
      </td>
    </tr>
    <tr id='section-70'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-70">&#182;</a>
        </div>
        <p>and now, clear out some bits.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">canvas</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">16</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">16</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
        <span class="nx">canvas</span><span class="p">.</span><span class="nx">clearRect</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">11</span><span class="p">,</span><span class="mi">16</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
        <span class="nx">me</span><span class="p">.</span><span class="nx">vuMeterData</span><span class="p">[</span><span class="nx">i</span><span class="p">][</span><span class="nx">j</span><span class="p">]</span> <span class="o">=</span> <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s1">&#39;image/png&#39;</span><span class="p">);</span></pre></div>
      </td>
    </tr>
    <tr id='section-71'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-71">&#182;</a>
        </div>
        <p>for debugging VU images</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="cm">/*</span>
<span class="cm">        var o = document.createElement(&#39;img&#39;);</span>
<span class="cm">        o.style.marginRight = &#39;5px&#39;; </span>
<span class="cm">        o.src = vuMeterData[i][j];</span>
<span class="cm">        document.documentElement.appendChild(o);</span>
<span class="cm">        */</span>
      <span class="p">}</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">testCanvas</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-72'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-72">&#182;</a>
        </div>
        <p>canvas + toDataURL();</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;canvas&#39;</span><span class="p">),</span>
        <span class="nx">ctx</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">ok</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">c</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">c</span><span class="p">.</span><span class="nx">getContext</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">ctx</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s1">&#39;2d&#39;</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">ctx</span> <span class="o">||</span> <span class="k">typeof</span> <span class="nx">c</span><span class="p">.</span><span class="nx">toDataURL</span> <span class="o">!==</span> <span class="s1">&#39;function&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-73'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-73">&#182;</a>
        </div>
        <p>just in case..</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">try</span> <span class="p">{</span>
      <span class="nx">ok</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">toDataURL</span><span class="p">(</span><span class="s1">&#39;image/png&#39;</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-74'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-74">&#182;</a>
        </div>
        <p>no canvas or no toDataURL()</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span></pre></div>
      </td>
    </tr>
    <tr id='section-75'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-75">&#182;</a>
        </div>
        <p>assume we&rsquo;re all good.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="k">return</span> <span class="nx">c</span><span class="p">;</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span> <span class="o">=</span> <span class="nx">me</span><span class="p">.</span><span class="nx">testCanvas</span><span class="p">();</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">vuDataCanvas</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">isFirefox</span> <span class="o">||</span> <span class="nx">isOpera</span><span class="p">))</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-76'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-76">&#182;</a>
        </div>
        <p>these browsers support dynamically-updating the favicon</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">me</span><span class="p">.</span><span class="nx">createVUData</span><span class="p">();</span>
      <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-77'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-77">&#182;</a>
        </div>
        <p>browser doesn&rsquo;t support doing this</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>        <span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">useFavIcon</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>

<span class="p">};</span></pre></div>
      </td>
    </tr>
    <tr id='section-78'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-78">&#182;</a>
        </div>
        <p>completely optional: Metadata/annotations/segments code</p>
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="nx">ThreeSixtyPlayer</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">Metadata</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">oSound</span><span class="p">,</span> <span class="nx">oParent</span><span class="p">)</span> <span class="p">{</span>

  <span class="nx">soundManager</span><span class="p">.</span><span class="nx">_wD</span><span class="p">(</span><span class="s1">&#39;Metadata()&#39;</span><span class="p">);</span>

  <span class="kd">var</span> <span class="nx">me</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
      <span class="nx">oBox</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oUI360</span><span class="p">,</span>
      <span class="nx">o</span> <span class="o">=</span> <span class="nx">oBox</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;ul&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
      <span class="nx">oItems</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">),</span>
      <span class="nx">isFirefox</span> <span class="o">=</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/firefox/i</span><span class="p">)),</span>
      <span class="nx">isAlt</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">oDuration</span><span class="p">;</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">lastWPExec</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">refreshInterval</span> <span class="o">=</span> <span class="mi">250</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">totalTime</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">events</span> <span class="o">=</span> <span class="p">{</span>

    <span class="nx">whileplaying</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

      <span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>
          <span class="nx">radius</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">radius</span><span class="p">,</span>
          <span class="nx">fullDuration</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="o">||</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">totalTime</span><span class="o">*</span><span class="mi">1000</span><span class="p">)),</span>
          <span class="nx">isAlt</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">d</span><span class="p">;</span>

      <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span><span class="nx">j</span><span class="o">=</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">isAlt</span> <span class="o">=</span> <span class="p">(</span><span class="nx">i</span><span class="o">%</span><span class="mi">2</span><span class="o">===</span><span class="mi">0</span><span class="p">);</span>
        <span class="nx">oParent</span><span class="p">.</span><span class="nx">drawSolidArc</span><span class="p">(</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oCanvas</span><span class="p">,(</span><span class="nx">isAlt</span><span class="o">?</span><span class="nx">oParent</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">segmentRingColorAlt</span><span class="o">:</span><span class="nx">oParent</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">segmentRingColor</span><span class="p">),</span><span class="nx">isAlt</span><span class="o">?</span><span class="nx">width</span><span class="o">:</span><span class="nx">width</span><span class="p">,</span> <span class="nx">isAlt</span><span class="o">?</span><span class="nx">radius</span><span class="o">/</span><span class="mi">2</span><span class="o">:</span><span class="nx">radius</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">oParent</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">endTimeMS</span><span class="o">/</span><span class="nx">fullDuration</span><span class="p">)),</span> <span class="nx">oParent</span><span class="p">.</span><span class="nx">deg2rad</span><span class="p">(</span><span class="mi">360</span><span class="o">*</span><span class="p">((</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span><span class="o">||</span><span class="mi">1</span><span class="p">)</span><span class="o">/</span><span class="nx">fullDuration</span><span class="p">)),</span> <span class="kc">true</span><span class="p">);</span>
      <span class="p">}</span>
      <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">d</span><span class="o">-</span><span class="nx">me</span><span class="p">.</span><span class="nx">lastWPExec</span><span class="o">&gt;</span><span class="nx">me</span><span class="p">.</span><span class="nx">refreshInterval</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">me</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span>
        <span class="nx">me</span><span class="p">.</span><span class="nx">lastWPExec</span> <span class="o">=</span> <span class="nx">d</span><span class="p">;</span>
      <span class="p">}</span>

    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">refresh</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-79'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-79">&#182;</a>
        </div>
        <p>Display info as appropriate</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="kd">var</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">j</span><span class="p">,</span> <span class="nx">index</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span>
        <span class="nx">now</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">position</span><span class="p">,</span>
        <span class="nx">metadata</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>

    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">j</span><span class="o">=</span><span class="nx">metadata</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">j</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">now</span> <span class="o">&gt;=</span> <span class="nx">metadata</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span> <span class="o">&amp;&amp;</span> <span class="nx">now</span> <span class="o">&lt;=</span> <span class="nx">metadata</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">endTimeMS</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">index</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
        <span class="k">break</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">!==</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">currentItem</span> <span class="o">&amp;&amp;</span> <span class="nx">index</span> <span class="o">&lt;</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-80'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-80">&#182;</a>
        </div>
        <p>update</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">mainTitle</span><span class="o">+</span><span class="s1">&#39; &lt;span class=&quot;metadata&quot;&gt;&lt;span class=&quot;sm2_divider&quot;&gt; | &lt;/span&gt;&lt;span class=&quot;sm2_metadata&quot;&gt;&#39;</span><span class="o">+</span><span class="nx">metadata</span><span class="p">[</span><span class="nx">index</span><span class="p">].</span><span class="nx">title</span><span class="o">+</span><span class="s1">&#39;&lt;/span&gt;&lt;/span&gt;&#39;</span><span class="p">;</span></pre></div>
      </td>
    </tr>
    <tr id='section-81'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-81">&#182;</a>
        </div>
        <p>self.setPageTitle(metadata[index].title+&lsquo; | &rsquo;+metadata.mainTitle);</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>      <span class="nx">metadata</span><span class="p">.</span><span class="nx">currentItem</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
    <span class="p">}</span>

  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">strToTime</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sTime</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">segments</span> <span class="o">=</span> <span class="nx">sTime</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;:&#39;</span><span class="p">),</span>
        <span class="nx">seconds</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">i</span><span class="p">;</span>
    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="nx">segments</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">;)</span> <span class="p">{</span>
      <span class="nx">seconds</span> <span class="o">+=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">segments</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="mi">10</span><span class="p">)</span><span class="o">*</span><span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="mi">60</span><span class="p">,</span><span class="nx">segments</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="o">-</span><span class="nx">i</span><span class="p">);</span> <span class="c1">// hours, minutes</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">seconds</span><span class="p">;</span>
  <span class="p">};</span>

  <span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">currentItem</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">mainTitle</span> <span class="o">=</span> <span class="nx">oSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">oLink</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">;</span>

  <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">oItems</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
      <span class="nx">o</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
      <span class="nx">title</span><span class="o">:</span> <span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">,</span>
      <span class="nx">startTime</span><span class="o">:</span> <span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">,</span>
      <span class="nx">startSeconds</span><span class="o">:</span> <span class="nx">me</span><span class="p">.</span><span class="nx">strToTime</span><span class="p">(</span><span class="nx">oItems</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[()]/g</span><span class="p">,</span><span class="s1">&#39;&#39;</span><span class="p">)),</span>
      <span class="nx">duration</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
      <span class="nx">durationMS</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
      <span class="nx">startTimeMS</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
      <span class="nx">endTimeMS</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
      <span class="nx">oNote</span><span class="o">:</span> <span class="kc">null</span>
    <span class="p">};</span>
  <span class="p">}</span>
  <span class="nx">oDuration</span> <span class="o">=</span> <span class="nx">oParent</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;duration&#39;</span><span class="p">,</span><span class="s1">&#39;div&#39;</span><span class="p">,</span><span class="nx">oBox</span><span class="p">);</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span> <span class="o">=</span> <span class="p">(</span><span class="nx">oDuration</span><span class="p">.</span><span class="nx">length</span><span class="o">?</span><span class="nx">me</span><span class="p">.</span><span class="nx">strToTime</span><span class="p">(</span><span class="nx">oDuration</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">innerHTML</span><span class="p">)</span><span class="o">*</span><span class="mi">1000</span><span class="o">:</span><span class="mi">0</span><span class="p">);</span>
  <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">duration</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">]</span><span class="o">?</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">].</span><span class="nx">startSeconds</span><span class="o">:</span><span class="p">(</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span><span class="o">?</span><span class="nx">me</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">givenDuration</span><span class="o">:</span><span class="nx">oSound</span><span class="p">.</span><span class="nx">durationEstimate</span><span class="p">)</span><span class="o">/</span><span class="mi">1000</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span><span class="o">-</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startSeconds</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startSeconds</span><span class="o">*</span><span class="mi">1000</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">durationMS</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">duration</span><span class="o">*</span><span class="mi">1000</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">endTimeMS</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">startTimeMS</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">durationMS</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">totalTime</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">duration</span><span class="p">;</span>
  <span class="p">}</span>

<span class="p">};</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/webkit/i</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/mobile/i</span><span class="p">))</span> <span class="p">{</span></pre></div>
      </td>
    </tr>
    <tr id='section-82'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-82">&#182;</a>
        </div>
        <p>iPad, iPhone etc.</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="nx">soundManager</span><span class="p">.</span><span class="nx">setup</span><span class="p">({</span>
    <span class="nx">useHTML5Audio</span><span class="o">:</span> <span class="kc">true</span>
  <span class="p">});</span>
<span class="p">}</span>

<span class="nx">soundManager</span><span class="p">.</span><span class="nx">setup</span><span class="p">({</span>
  <span class="nx">html5PollingInterval</span><span class="o">:</span> <span class="mi">50</span><span class="p">,</span> <span class="c1">// increased framerate for whileplaying() etc.</span>
  <span class="nx">debugMode</span><span class="o">:</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/debug=1/i</span><span class="p">)),</span> <span class="c1">// disable or enable debug output</span>
  <span class="nx">consoleOnly</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="nx">flashVersion</span><span class="o">:</span> <span class="mi">9</span><span class="p">,</span>
  <span class="nx">useHighPerformance</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="nx">useFlashBlock</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span></pre></div>
      </td>
    </tr>
    <tr id='section-83'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-83">&#182;</a>
        </div>
        <p>FPS data, testing/debug only</p>
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="k">if</span> <span class="p">(</span><span class="nx">soundManager</span><span class="p">.</span><span class="nx">debugMode</span><span class="p">)</span> <span class="p">{</span>
  <span class="nb">window</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">threeSixtyPlayer</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">p</span> <span class="o">&amp;&amp;</span> <span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span> <span class="o">&amp;&amp;</span> <span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isHome</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">soundManager</span><span class="p">.</span><span class="nx">_writeDebug</span><span class="p">(</span><span class="s1">&#39;fps: ~&#39;</span><span class="o">+</span><span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span><span class="p">);</span>
      <span class="nx">p</span><span class="p">.</span><span class="nx">lastSound</span><span class="p">.</span><span class="nx">_360data</span><span class="p">.</span><span class="nx">fps</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">},</span><span class="mi">1000</span><span class="p">);</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">ThreeSixtyPlayer</span> <span class="o">=</span> <span class="nx">ThreeSixtyPlayer</span><span class="p">;</span> <span class="c1">// constructor</span>

<span class="p">}(</span><span class="nb">window</span><span class="p">));</span>

<span class="nx">threeSixtyPlayer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ThreeSixtyPlayer</span><span class="p">();</span></pre></div>
      </td>
    </tr>
    <tr id='section-84'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-84">&#182;</a>
        </div>
        <p>hook into SM2 init</p>

      </td>
      <td class=code>
        <div class='highlight'><pre><span class="nx">soundManager</span><span class="p">.</span><span class="nx">onready</span><span class="p">(</span><span class="nx">threeSixtyPlayer</span><span class="p">.</span><span class="nx">init</span><span class="p">);</span></pre></div>
      </td>
    </tr>
  </table>
</div>
</body>
